<template>
  <div>
    <el-card class="content scrollbar">
      <el-form class="search ml20" :inline="true" label-suffix="：" size="mini">
        <el-form-item label="药品信息">
          <el-input v-model="search.drugs" clearable class="w280" maxlength="30" placeholder="药品名称/通用名/药品编码/三方编码/助记码"
            @keyup.enter.native="getList('search')" />
        </el-form-item>
        <el-form-item label="药品类型">
          <el-select v-model="search.drugTypeCodes " clearable class="w150" multiple collapse-tags placeholder="请选择药品类型"
            @change="getList('search')">
            <el-option v-for="item in options.drugTypeCode" :key="item.drugTypeCode" :label="item.drugTypeName"
              :value="item.drugTypeCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="药品分类">
          <el-cascader v-model="search.drugCategoryCodes" class="w200" :options="options.drugCategoryCode"
            :props="optionProps" placeholder="请选择药品分类" collapse-tags clearable @change="getList('search')" />

        </el-form-item>
        <!-- <el-form-item label="条形码">
        <el-input v-model="search.drugBarCode" class="w130" maxlength="30" placeholder="请输入条形码" />
      </el-form-item> -->
        <el-form-item label="创建人">
          <el-input v-model="search.createBy" clearable class="w130" maxlength="30" placeholder="请输入创建人"
            @keyup.enter.native="getList('search')" />
        </el-form-item>
        <el-form-item label="创建来源">
          <el-select v-model="search.dataSources" class="w150" multiple collapse-tags clearable placeholder="请选择创建来源"
            @change="getList('search')">
            <el-option v-for="item in options.dataSources" :key="item.dictCode" :label="item.dictValue"
              :value="item.dictCode" />
          </el-select>
        </el-form-item>

        <el-form-item label="创建日期">
          <el-date-picker v-model="searchTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" class="w220" clearable
            @change="(val) => changeDateRange( val)" />
        </el-form-item>
        <el-form-item label="三方编码">
          <el-input v-model="search.drugThirdCode" clearable class="w130" maxlength="30" placeholder="请输入药品编码"
            @keyup.enter.native="getList('search')" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="searchStatues" clearable @change="changeStatues">
            <el-radio :label="2">全部</el-radio>
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="0">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList('search')">确认
          </el-button>
          <el-button @click="searchReset">重置
          </el-button>
        </el-form-item>
        <el-form-item class="ml50">
          <el-button type="primary" @click="detailBtn('新增',{})">新增
          </el-button>
          <el-button type="primary" @click="dialogVisible = true">导入
          </el-button>
          <!-- <el-button type="primary" @click="getList('search')">导出
        </el-button> -->
          <el-button type="primary" @click="hint('导出','导出列表')">导出
          </el-button>
        </el-form-item>
      </el-form>

      <div class="batchBox">
        <div>已选 <span class="red">{{ checkedNum?checkedNum:0 }}</span> 条数据</div>
        <div>
          <el-button size="mini" :disabled="checkedNum<1" type="primary" @click="hint('上架', '上架所选择药品')">上架</el-button>
          <el-button size="mini" :disabled="checkedNum<1" type="primary" @click="hint('下架', '下架所选择药品')">下架</el-button>

        </div>
      </div>
      <el-table :data="list" size="small" height="58vh" :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass" @selection-change="handleSelectionChange">
        <ElTableColumn type="selection" width="50" />
        <ElTableColumn label="药品名称" prop="drugName" />
        <ElTableColumn label="通用名称" prop="drugAlias" />
        <ElTableColumn label="单位" prop="drugUnitName" />
        <ElTableColumn label="药品编码" prop="drugCode" />
        <ElTableColumn label="三方编码" prop="thirdCode" />
        <ElTableColumn label="药品类型" prop="drugTypeName" />
        <ElTableColumn label="药品分类" prop="drugCategoryName" />
        <ElTableColumn label="条形码" prop="drugBarCode" />
        <ElTableColumn label="价格">
          <template slot-scope="{ row }">
            <div v-if="row.drugPrice">￥{{ common.centsToYuan(row.drugPrice) }}</div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="创建来源" prop="dataSource" />
        <ElTableColumn label="创建日期" prop="createTime" width="180" />
        <ElTableColumn label="创建人" prop="createBy" />
        <ElTableColumn label="状态" prop="status" />
        <ElTableColumn label="操作" width="180">
          <template slot-scope="{ row }">
            <el-button size="mini" @click="detailBtn('详情',row)">详 情</el-button>
            <el-button type="primary" size="mini" @click="detailBtn('修改',row)">修改</el-button>
          </template>
        </ElTableColumn>
      </el-table>
      <pagination class="page tc mt10" :total="page.total" :page.sync="page.pageNum" :limit.sync="page.pageSize"
        @pagination="getList" />
      <el-dialog title="导入" :close-on-click-modal="false" :visible.sync="dialogVisible" width="40%">
        <el-form class="search ml20" :inline="true" label-position="right" label-width="100px" size="mini">
          <el-form-item label="下载模板">
            <el-button type="text" class="w500 tl" @click="hint('下载模板',`确定下载模板`)">导入模板</el-button>
          </el-form-item>
          <el-form-item label="选择文件">
            <fileUpload v-if="dialogVisible" file-type="drugs" @getUrl="getFile" />
          </el-form-item>
        </el-form>
        <!-- <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
      </el-dialog>

    </el-card>
  </div>
</template>

<script>

import pagination from '@/components/Pagination';
import { dictsPullList } from '@/api/dictionaries';
import exportUrl from '@/utils/exportUrl';
import fileUpload from '@/components/Upload/fileUpload';
import { getDrugList, selectList, drugcategoryList, updateBatchDrug, exportDrug } from '@/api/drugs';
// import { mapGetters } from 'vuex';
class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}
class Search {
  drugs = '';
  drugTypeCodes = [];
  drugCategoryCodes = [];
  drugBarCode = '';
  createBy = '';
  dataSources = [];
  statuses = [0, 1];
  startCreateTime = '';
  endCreateTime = '';
  drugThirdCode = '';
}
class Options {
  drugTypeCode = [];
  drugCategoryCode = [];
  dataSources = [];
  options = [
    { id: 1, name: '选项一' },
    { id: 2, name: '选项二' },
    { id: 3, name: '选项三' },
    { id: 4, name: '选项四' }
  ];
}
export default {
  components: {
    pagination,
    fileUpload
  },
  data () {
    return {
      search: new Search(), // 检索条件
      options: new Options(), // 选项
      page: new Page(), // 分页
      searchTime: [], // 创建日期
      searchD: '', // 搜索医生
      checkedNum: '', // 选中个数
      checkedList: '', // 选中列表
      list: [], // 列表
      searchStatues: 2,
      url: exportUrl.url,
      dialogVisible: false,
      optionProps: {
        value: 'drugCategoryCode',
        label: 'drugCategoryName',
        children: 'children',
        multiple: true,
        checkStrictly: true,
        emitPath: false
      }
    };
  },
  computed: {
    // ...mapGetters(['permission'])
  },

  mounted () {
    // this.getList();
    this.getOptions();
  },
  methods: {
    async getOptions () {
      const { data } = await selectList({});
      this.options.drugTypeCode = data.list;
      const res = await drugcategoryList({});
      this.options.drugCategoryCode = res ? res.data.list : [];

      const dataSources = await dictsPullList({
        dicTypes: ['dataSource']
      });
      this.options.dataSources = dataSources.data.dataSource;
      // console.log(this.options.dataSources);
    },
    async getList () {
      try {
        const { data } = await getDrugList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
          ...this.search
        });
        // console.log(data);
        this.list = data.list;
        this.page.total = data.total;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
      }
    },
    // 搜索状态
    changeStatues (e) {
      this.search.statuses = [];
      if (e == 2) {
        this.search.statuses.push(0);
        this.search.statuses.push(1);
      } else {
        this.search.statuses.push(e);
      }
      this.getList('search');
    },
    // 搜索重置
    searchReset () {
      this.search = new Search();
      this.searchTime = [];
      this.search.statuses = [0, 1];
      this.searchStatues = 2;
      this.getList();
    },
    // 创建时间
    changeDateRange (val) {
      this.search.startCreateTime = val ? val[0] : '';
      this.search.endCreateTime = val ? val[1] : '';
      this.getList('search');
    },
    // 改变表格选中状态
    handleSelectionChange (val) {
      // this.checkedList = val;
      this.checkedNum = val.length;
      this.checkedList = val.map((i) => {
        return i.id;
      });
      // console.log(this.checkedList);
    },
    // 详情跳转
    detailBtn (nameType, row) {
      this.$router.push({
        path: '/archives/drugs/archivesDetail',
        query: { nameType: nameType, id: row.id }
      });
    },
    // 确认提示
    hint (status, hintText, row) {
      this.$confirm(`${hintText}, 是否确认?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          switch (status) {
            case 'del':
              this.delRow(row);
              break;
            case 'create':
              this.submitBrand(row);
              break;
            case '上架':
              this.stateChange(1);
              break;
            case '下架':
              this.stateChange(0);
              break;
            case '导出':
              this.export();
              break;
            case '下载模板':
              this.template();
              break;
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    },
    // 状态更改
    async stateChange (type) {
      const res = await updateBatchDrug({
        status: type,
        ids: this.checkedList
      });
      this.$notification('操作成功', 'success', res.msg);
      this.getList();
    },
    // 导出
    async export () {
      const res = await exportDrug({
        ...this.search
      });
      // let url = window.server.SERVER_API[1].excel + res.data;
      // window.open(url);
    },
    // 下载模板
    async template () {
      // const res = await personExport();
      let url = window.server.MUBAN + 'muban/%E4%BA%BA%E5%91%98%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx';
      window.open(url);
    },
    getFile (e) {
      console.log(e);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  // height: calc(100% - 200px);
  // overflow-y: hidden;
  height: 82vh;
  ::v-deep img {
    width: 50px;
    border-radius: 4px;
    margin-top: 6px;
  }
}
.content:hover {
  overflow-y: auto;
}
.batchBox {
  // background: #bf3f3f;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 14px;
}
.red {
  color: #bf3f3f;
  font-weight: bold;
}
</style>
